// 导入Lucide React图标库中的ChevronLeft图标组件
import { ChevronLeft } from 'lucide-react';
// 导入React Router的useNavigate钩子，用于页面导航
import { useNavigate } from 'react-router-dom';

// 定义我的卡券页面组件
export default function MyCouponsPage() {
  // 获取导航函数，用于页面跳转
  const navigate = useNavigate();

  // 处理返回按钮点击事件
  const handleBackClick = () => {
    // 返回上一页
    navigate(-1);
  };

  // 返回JSX结构
  return (
    // 主容器，设置最小高度和背景色
    <div className="min-h-full bg-white">
      {/* 顶部导航栏 */}
      <div className="px-4 py-6 flex items-center border-b border-gray-100">
        {/* 返回按钮 */}
        <button 
          onClick={handleBackClick}
          className="w-8 h-8 flex items-center justify-center mr-4"
        >
          {/* 左箭头图标 */}
          <ChevronLeft className="w-6 h-6 text-gray-900" />
        </button>
        {/* 页面标题 */}
        <h1 className="text-xl font-bold text-gray-900">我的卡券</h1>
      </div>

      {/* 页面内容区域 */}
      <div className="px-4 py-6">
        {/* 开发中提示文本 */}
        <div className="text-center text-gray-500">
          <p>我的卡券功能开发中...</p>
        </div>
      </div>
    </div>
  );
} 